.px2rem(@name, @px){
    @{name}: @px / 75 * 1rem;
}
body{
    background: #f9f9f9;
}
header{
    .px2rem(height, 90);
    .px2rem(font-size, 32);
    .px2rem(line-height, 90);
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    background: white;
    .quxiao,.icon-fanhui{
        position: absolute;
        top: 0;
        left: 2%;
    }
}
header h3{
    text-align: center;
}
.guanli{
    position: absolute;
    top: 0%;
    left: 90%;
}
.b_nav{
    z-index: 1000;
    background: white;
//  .px2rem(margin-top, 60);
    .px2rem(height, 476);
    position: fixed;
    .px2rem(top, 90);
    width: 100%;
    .background{
        width: 100%;
        .px2rem(height, 200);
        background: url(../images/show5.png) no-repeat;
        background-size: cover ;
        opacity: 0.5;
        
    };
    #b_box{
        border: 10px solid white;
        position: absolute;
        .px2rem(width, 176);
        .px2rem(height, 176);
        border-radius: 50%;
        margin-left: 50%;
        .px2rem(left, -93);
        .px2rem(top, 74);
        overflow: hidden;
        img {
           .px2rem(width, 210);
           .px2rem(height, 196);
           position: relative;
           left: -8px;
           top: -8px;
        }
    }
    ul{
        display: flex;
        .px2rem(margin-top, 163);
        .px2rem(font-size, 27);
        line-height: 30px;
        li{
            float: left;
            text-align: center;
            flex: 1;
            border-left: 1px solid #ccc;
            .px2rem(height, 78);
            .px2rem(line-height, 40);
        }
        li:first-child{
            border: none;
        }
    }
}
.b_con{
    .px2rem(margin-top, 582);
    .b_content{
       .px2rem(font-size, 26);
       .px2rem(margin-top, 20);
       background: white;
       ul{
            li{
               .px2rem(line-height, 90);
               .px2rem(margin-left, 35);
               border-bottom: 1px solid #efefef;
               display: flex;
               margin-top: 0px;
               a{
                   flex: 20;
                }
                .right{
                   flex: 1;
                }
            }
            li:last-child{
                border: none;
            }
       }
    }
}
.aa{
    .px2rem(margin-bottom,98);
}





.footer-j{

        z-index: 999;
        background-color: #fff;
        .px2rem(height,98);
        border-top: 1px solid #ccc;
        box-shadow: 0 0px 15px #ccc;
        position: fixed;
        bottom:0;
        left:0;
        width: 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        .foot{
            a{
                text-decoration: none;
            }
            width: 20%;
            text-align: center;
            .iconfont{
                .px2rem(font-size,60);
                position: relative;
                top: 0;
                left:0;
            }
            .active{
                position: absolute;                 
            }
            .hide{
                display: none;          
            }
            .homepage{
                top: 17%;
                left:6%;
            }
            .discover{
                top: 17%;
                left:27%;
            }
            .add{
                top: 17%;
                left:46.5%;
            }
            .warn{
                top: 17%;
                left:66.5%;
            }
            .user{
                top: 17%;
                left:86%;
            }
        }
    }
.dl_nav,.zc_nav{
    .px2rem(height, 468);
    .px2rem(margin-top, 90);
    background: url(../images/register.png);
    background-size: 100% 100%;
}
.dl_active,.zc_active{
    .px2rem(margin-top, 16);
    .dl_inp,.zc_inp{
        li{
            .px2rem(margin-top, 24);
            input{
                border: 1px solid black;
                border-radius: 4px;
                text-align: center;
                .px2rem(font-size, 25);
                .px2rem(width, 638);
                .px2rem(height, 88);
                margin-left: 50%;
                position: relative;
                .px2rem(left, -319);
            }
        }
        li:last-child{
            input{
                background: #777777;
                color: white;
            }
        }
    }
    .dl_zc,.zc_dl{
        text-align: center;
        .px2rem(margin-top, 43);
        .px2rem(font-size, 26);
    }
    .dl_way{
        position: fixed;
        top: 88%;
        width: 100%;
        ul{
            display: flex;
            li{
                flex: 1;
                text-align: center;
                a{
                    .px2rem(font-size, 48);
                }
                span{
                    .px2rem(font-size, 20);
                    color: #959595;
                }
            }
        }
    }
    .dl_prompt{
        text-align: center;
        margin-top: 10px;
        display: none;
        a{
            color: red;
            .px2rem(font-size, 24);
        }
    }
}
.wj_active{
    .px2rem(margin-top, 166);
    flex-wrap: wrap;
    position: relative;
    ul{
        .wj_add{
            font-size: 84px;
            .px2rem(line-height, 318);
            font-weight: 100;
            color: #ccc;
        }
        li{
            .px2rem(width, 318);
            .px2rem(height, 318);
            border: 1px solid #ccc;
            .px2rem(margin-left, 38);
            float: left;
            text-align: center;
        }
        .wj_default img{
            width: 100%;
        }
    }
    .wj_end{
        display: flex;
        margin-top: 60px;
        position: absolute;
        top: 300px;
        width: 100px;
        margin:0 50%;
        left: -50px;
        text-align: center;
        hr{
            flex: 1;
        }
        p{
            flex: 1;
        }
    }
}

